<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<title>three.js css2d - label</title>
	<link type="text/css" rel="stylesheet" href="../../examples/main.css">
	<style>
		.label {
			color: #FFF;
			font-family: sans-serif;
			padding: 2px;
			background: rgba( 0, 0, 0, .6 );
		}
	</style>
</head>
<body>
<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> css2d - label</div>

<script type="module">

	import { OrbitControls } from '../../examples/jsm/controls/OrbitControls.js';

	import * as THREE from '../../build/three.module.js';
	import { EffectComposer } from '../../examples/jsm/postprocessing/EffectComposer.js'
	import { RenderPass } from '../../examples/jsm/postprocessing/RenderPass.js'
	import { OutlinePass } from '../../examples/jsm/postprocessing/OutlinePass.js'

	let camera, scene, renderer;
	let controls;
	let bloomComposer;

	init();
	animate();
	initDemo();

	function animate() {

		requestAnimationFrame( animate );
		controls.update();

		render();

	}

	function render() {

		renderer.render( scene, camera );
		if (bloomComposer) {
			bloomComposer.render()
		}
	}

	function init() {

		camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
		camera.position.z = 1000;

		scene = new THREE.Scene();

		//

		renderer = new THREE.WebGLRenderer( { antialias: true } );
		renderer.setPixelRatio( window.devicePixelRatio );
		renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild( renderer.domElement );

		//

		controls = new OrbitControls( camera, renderer.domElement );
	}

	function initDemo() {
		const geometry1 = new THREE.BoxGeometry(50, 50, 50);
		const material1 = new THREE.MeshBasicMaterial({});
		const cube1 = new THREE.Mesh(geometry1, material1);
		cube1.position.set(100, 0, 0)
		scene.add(cube1);

		const geometry2 = new THREE.BoxGeometry(50, 50, 50);
		const material2 = new THREE.MeshBasicMaterial({});
		const cube2 = new THREE.Mesh(geometry2, material2);
		scene.add(cube2);

		// THREE.OutlinePass(resolution, scene, camera, selectedObjects)
		// resolution 分辨率
		// scene 场景
		// camera 相机
		// selectedObjects 需要选中的物体对象, 传入需要边界线进行高亮处理的对象
		const outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera, [cube1]);
		outlinePass.renderToScreen = true;
		outlinePass.edgeStrength = 2 //粗
		outlinePass.edgeGlow = 2 //发光
		outlinePass.edgeThickness = 1 //光晕粗
		outlinePass.pulsePeriod = 1 //闪烁
		outlinePass.usePatternTexture = false //是否使用贴图
		outlinePass.visibleEdgeColor.set("#ffffff"); // 设置显示的颜色
		outlinePass.hiddenEdgeColor.set(0,0,0); // 设置隐藏的颜色

		//创建效果组合器对象，可以在该对象上添加后期处理通道，通过配置该对象，使它可以渲染我们的场景，并应用额外的后期处理步骤，在render循环中，使用EffectComposer渲染场景、应用通道，并输出结果。
		bloomComposer = new EffectComposer(renderer)
		bloomComposer.setSize(window.innerWidth, window.innerHeight);
		bloomComposer.addPass(new RenderPass(scene, camera));
		bloomComposer.addPass(outlinePass)

		// 眩光通道bloomPass插入到composer
	}
</script>
</body>
</html>
